<template>
  <div style="background-color: #f2f2f2">
    <div style="position: fixed; top: 0;z-index: 999;">
      <van-nav-bar
        title="好货"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
        </template>
        <template #right>
          <van-icon class-prefix="icon" name="wodeb" size="30" />
        </template>
      </van-nav-bar>
      <van-tabs @click="chage">
        <van-tab
          v-for="(index, i) in list"
          :title="index"
          :name="i"
          :key="index"
        ></van-tab>
      </van-tabs>
    </div>
    <div style="height: 90px;"></div>
    <div
      v-for="(v, i) in datalist"
      :key="i"
      @click="asd(v)"
      style="
        background-color: #fff;
        width: 90%;
        margin: 15px auto 10px;
        padding: 20px 10px;
      "
    >
      <div>
        <div class="lis-head" style="position: relative">
          <div class="touxiang">
            <img :src="v.touxiang" alt="" />
          </div>
          <span
            style="position: absolute; left: 50px; top: 0px; font-size: 16px"
          >
            {{ v.text }}
            <p style="font-size: 12px; color: #bcbcbc">9月</p>
          </span>
          <div class="guanzhu">+关注</div>
        </div>
        <div style="margin-top: 20px">{{ v.content }}</div>
        <div style="display: flex; flex-wrap: wrap">
          <img
            v-for="(b, i) in v.images"
            :key="i"
            style="
              margin: 5px 3px;
              width: 100px;
              height: 100px;
              object-fit: cover;
            "
            :src="b"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHaohuo } from "@/api/LiXiao/Index";
export default {
  data() {
    return {
      list: [
        "精选",
        "特价游",
        "亲子游学",
        "温泉酒店",
        "滑雪",
        "深度游",
        "徒步登山",
      ],
      datalist: [],
      type: 0,
    };
  },
  created() {
    this.funa();
  },
  methods: {
    asd(v) {
      this.$router.push({ path: "/find", query: { id: v.id } });
    },
    chage(item) {
      this.type = item;
      this.funa();
    },
    async funa() {
      let ok = await getHaohuo({ type: this.type });
      this.datalist = ok;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/userHome");
    },
  },
};
</script>

<style scoped>
.guanzhu {
  width: 50px;
  height: 20px;
  border: 1px solid #fa963f;
  color: #fa963f;
  text-align: center;
  line-height: 20px;
  border-radius: 10px;
  float: right;
  margin-top: -28px;
  margin-right: 10px;
}
.touxiang {
  width: 40px;
  height: 40px;
  display: flex;
}
.touxiang > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}
</style>